<template>
  <div class="app-container">
    <el-tabs type="card">
      <el-tab-pane class="cabinetBox">
        <span slot="label"><i class="el-icon-takeaway-box"></i> 充电仓详情</span>
        <el-card class="box-card" v-for="(item, index) in cabnietList" :key="index">
          <div slot="header" class="clearfix">
            <i class="el-icon-s-opportunity" :style="item.value ? 'color: #55aa7f ' : 'color: #868686'"></i>
            <span style="color: #529ecc;">{{item.name}}</span>
            <div style="float: right;color: #10b981;">{{area}}</div>
          </div>
          <div style="text-align: center">
            <el-avatar :size="65" shape="circle" :style="item.value ? 'backgroundColor: #55aa7f;' : 'backgroundColor: #ffa285;'"> Bin {{item.addr}} </el-avatar>
          </div>
          <ul class="user-info">
            <li :style="item.value ?'color: #55aa7f' : 'color: #c10000'">
              <i class="el-icon-data-analysis"></i> 当前状态
              <div class="user-right"> {{ item.value }}</div>
            </li>
            <li>
              <i class="el-icon-location-information" style="color: #3f7fbe;"></i> 经度
              <div class="user-right">{{ lon }}</div>
            </li>
            <li>
              <i class="el-icon-s-promotion" style="color: #55aa7f;"></i> 纬度
              <div class="user-right">{{ lat }}</div>
            </li>
          </ul>
        </el-card>
        <div v-show="cabnietList.length == 0" style="text-align: center;color: #777777;margin-top: 1%;">暂无充电仓信息</div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-s-operation"></i> 电表信息</span>
        <div class="head-container cabinetBox" v-for="(item, index) in meterList" :key="index">
          <el-card class="box-card" >
            <div slot="header" class="clearfix" style="font-weight: 600;">
              <span :style="item.status == true ?'color: #55aa7f' : 'color: #c10000'">{{ item.meterNum }}</span>
            </div>
            <div>
              <div style="text-align: center">
                <el-avatar :size="70" shape="circle" :style="item.status == true ? 'backgroundColor: #55aa7f;' : 'backgroundColor: #c10000;'"> Meter {{item.meterId}} </el-avatar>
              </div>
              <ul class="user-info">
                <li><div style="height: 100%">
                  <i class="el-icon-position" style="color: #3f7fbe;"></i> 所属充电桩
                  <div class="user-right">{{ item.cabinet.name }}</div>
                </div></li>
                <li>
                  <i class="el-icon-data-line" style="color: #3f7fbe;"></i> 电流
                  <div class="user-right">{{ item.currentC }}</div>
                </li>
                <li>
                  <i class="el-icon-data-analysis" style="color: #3f7fbe;"></i> 电压
                  <div class="user-right"> {{ item.voltageC }}</div>
                </li>
                <li>
                  <i class="el-icon-coin" style="color: #3f7fbe;"></i> 有功总电量
                  <div class="user-right"> {{ item.totalActivePower }}</div>
                </li>
                <li>
                  <i class="el-icon-postcard" style="color: #3f7fbe;"></i> 是否注册
                  <div class="user-right" :style="item.registered == true ?'color: #55aa7f' : 'color: #c10000'">{{ item.registered }}</div>
                </li>
                <li>
                  <i class="el-icon-switch-button" style="color: #3f7fbe;"></i> 是否开闸
                  <div class="user-right" :style="item.status == true ?'color: #55aa7f' : 'color: #c10000'">{{ item.status }}</div>
                </li>
                <li>
                  <i class="el-icon-time" style="color: #3f7fbe;"></i> 创建时间
                  <div class="user-right"> {{ item.createTime }}</div>
                </li>
              </ul>
            </div>
          </el-card>
        </div>
        <div v-show="meterList.length == 0" style="text-align: center;color: #777777;margin-top: 1%;">暂无电表信息</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'MeterList',
  data() {
    return {
      meterList: [],
      cabnietList: [],
      area: '',
      lon: '',
      lat: ''
    }
  },
  mounted() {
    this.meterList = this.$route.query.meters;
    this.cabnietList = this.$route.query.smartModules;
    this.area = this.$route.query.area;
    this.lon = this.$route.query.lon;
    this.lat = this.$route.query.lat;
    this.getCabinetList();
  },
  methods: {
    getCabinetList() {
      var regAddr = [];
      this.cabnietList.forEach(item => {
        item.state.forEach(item1 => {
          var obj = {};
          obj.addr = item1.qrCode.smartAddr;
          obj.name = item1.qrCode.name;
          obj.value = item1.open;
          regAddr.push(obj);
        })
      })
      this.cabnietList = regAddr.sort((item1, item2) => item1.name.localeCompare(item2.name));
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .cabinetBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .box-card {
    width: 24%;
    margin: 0.5%;
  }
  .user-info {
    padding-left: 0;
    list-style: none;
    li{
      border-bottom: 1px solid #F0F3F4;
      padding: 14px 0;
      font-size: 13px;
    }
    .user-right {
      float: right;
      a{
        color: #317EF3;
      }
    }
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
</style>
